Add touch event listeners for mobile movement tracking in speed modifier component#18
Conversation
There was a problem hiding this comment.
Pull request overview
This PR extends the movement-speed-modifier A-Frame component to recognize mobile touch activity as an additional “moving forward” signal, primarily to keep speed-line visibility in sync with touch-based movement.
Changes:
- Added
touchCountstate and touch start/end handlers to track the number of active touches. - Added lifecycle-managed
touchstart/touchend/touchcancellisteners. - Updated
isMovingForward()to include single-touch as a forward-movement indicator.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| addTouchListeners: function () { | ||
| window.addEventListener("touchstart", this.onTouchStart); | ||
| window.addEventListener("touchend", this.onTouchEnd); | ||
| window.addEventListener("touchcancel", this.onTouchEnd); | ||
| }, |
There was a problem hiding this comment.
Tested and there were no warnings. Scroll performance is not applicable for A-Frame scenes.
| removeTouchListeners: function () { | ||
| window.removeEventListener("touchstart", this.onTouchStart); | ||
| window.removeEventListener("touchend", this.onTouchEnd); | ||
| window.removeEventListener("touchcancel", this.onTouchEnd); | ||
| }, |
There was a problem hiding this comment.
Not applicable.
| const touchMovingForward = this.touchCount === 1; // 1 finger = forward, 2 = backward | ||
| return keyboardMovingForward || joystickMovingForward || armSwingMovingForward || touchMovingForward; |
There was a problem hiding this comment.
It doesn't need to check this.data.enabled since speed line visibility is blocked at the tick() level.
| onTouchStart: function (event) { | ||
| this.touchCount = event.touches.length; | ||
| this.syncSpeedLinesVisibility(); | ||
| }, |
| const joystickMovingForward = this.isJoystickForward(); | ||
| const armSwingMovingForward = armSwingMovement && armSwingMovement.moving && !armSwingMovement.reverseHeld; | ||
| return keyboardMovingForward || joystickMovingForward || armSwingMovingForward; | ||
| const touchMovingForward = this.touchCount === 1; // 1 finger = forward, 2 = backward |
There was a problem hiding this comment.
It's the touch-controls component that treats it this way.
This pull request improves support for mobile touch input to the
movement-speed-modifiercomponent. The main changes include tracking touch events, updating movement logic to recognize touch-based movement, and ensuring that speed lines show up when moving forward on mobile.Mobile touch input support:
touchCountproperty and methods (onTouchStart,onTouchEnd) to track the number of fingers on the screen, and update movement state accordingly. [1] [2]addTouchListenersandremoveTouchListenersmethods to manage touch event listeners during component lifecycle. [1] [2]Movement logic updates:
isMovingForwardmethod to support forward movement when one finger is on the screen (two fingers moves the player backwards, so that would register asfalse), allowing for mobile-friendly movement controls.Trello: https://trello.com/c/GmhnPkKL